<template>
  <div id="category">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><a href="/home">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-row>
        <vxe-table
          border
          resizable
          ref="xTree"
          :tree-config="{
            children: 'children',
            iconOpen: 'fa fa-minus-square-o',
            iconClose: 'fa fa-plus-square-o',
          }"
          :data="tableData"
        >
          <vxe-table-column
            field="name"
            title="app.body.label.name"
            tree-node
          ></vxe-table-column>
          <vxe-table-column field="size" title="Size"></vxe-table-column>
          <vxe-table-column field="type" title="Type"></vxe-table-column>
          <vxe-table-column field="date" title="Date"></vxe-table-column>
        </vxe-table>
      </el-row>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'category',
  data() {
    return {
      categoryList: [],
      columns: [
        {
          label: '分类名称',
          prop: 'cate_name',
        },
      ],
      tableData: [
        {
          id: 1000,
          name: 'vxe-table 从入门到放弃1',
          type: 'mp3',
          size: 1024,
          date: '2020-08-01',
        },
        {
          id: 1005,
          name: 'Test2',
          type: 'mp4',
          size: null,
          date: '2021-04-01',
          children: [
            {
              id: 24300,
              name: 'Test3',
              type: 'avi',
              size: 1024,
              date: '2020-03-01',
            },
            {
              id: 20045,
              name: 'vxe-table 从入门到放弃4',
              type: 'html',
              size: 600,
              date: '2021-04-01',
            },
            {
              id: 10053,
              name: 'vxe-table 从入门到放弃96',
              type: 'avi',
              size: null,
              date: '2021-04-01',
              children: [
                {
                  id: 24330,
                  name: 'vxe-table 从入门到放弃5',
                  type: 'txt',
                  size: 25,
                  date: '2021-10-01',
                },
                {
                  id: 21011,
                  name: 'Test6',
                  type: 'pdf',
                  size: 512,
                  date: '2020-01-01',
                },
                {
                  id: 22200,
                  name: 'Test7',
                  type: 'js',
                  size: 1024,
                  date: '2021-06-01',
                },
              ],
            },
          ],
        },
        {
          id: 23666,
          name: 'Test8',
          type: 'xlsx',
          size: 2048,
          date: '2020-11-01',
        },
        {
          id: 24555,
          name: 'vxe-table 从入门到放弃9',
          type: 'avi',
          size: 224,
          date: '2020-10-01',
        },
      ],
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    async getCategoryList() {
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) {
        return this.$message.error('初始化商品分类数据失败！')
      }
      this.categoryList = res.data
    },
  },
}
</script>

<style lang="less" scoped>
</style>
